<template>
  <div class="page-container">
    <el-form ref="formRef" :model="form" :rules="rules">
      <div class="title">忘记密码</div>
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model.trim="form.email"
          v-focus
          placeholder="请输入邮箱地址"
          tabindex="1"
          type="text"
        />
      </el-form-item>
      <el-button
        :loading="loading"
        class="btn-primary"
        type="primary"
        @click="handleSubmit"
      >
        发送
      </el-button>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'ForgetPassword',
    directives: {
      focus: {
        inserted(el) {
          el.querySelector('input').focus()
        },
      },
    },
    data() {
      return {
        form: {
          email: '',
        },
        rules: [
          {
            email: [
              {
                required: true,
                trigger: 'change',
                // validator: validateEmail,
              },
            ],
          },
        ],
        loading: false,
      }
    },
    created() {
      document.body.style.overflow = 'hidden'
    },
    beforeDestroy() {
      document.body.style.overflow = 'auto'
    },
    methods: {
      handleSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
          } else {
            return false
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import './style.scss';

  .page-container {
    width: 360px;
    margin-top: 70px;
  }
</style>
